/**
 * 添加水印 异步
 * @param {图片file，在inout中的file} file
 * @param {水印数组，比如名字，电话，时间，地址} watermarks
 */
function addWatermarkAndUpload(file, watermarks) {
    return new Promise(((resolve, reject) => {
        const reader = new FileReader();
        reader.onload = function (event) {
            const img = new Image();
            img.onload = function () {
                const canvas = document.createElement('canvas');
                const ctx = canvas.getContext('2d');

                // 设置canvas尺寸与图片一致
                canvas.width = img.width;
                canvas.height = img.height;

                // 绘制图片到canvas
                ctx.drawImage(img, 0, 0, img.width, img.height);

                //水印大小和颜色
                let fontSize = 100
                ctx.font = fontSize + 'px Arial';
                ctx.fillStyle = 'rgba(255, 0, 0, 0.5)';
                //水印起始位置，默认左下角
                let x = 20
                let y = 20
                // 添加水印
                for (let i = 0; i < watermarks.length; i++) {
                    y = watermarkHandle(ctx, watermarks[i], canvas.width, canvas.height, fontSize, x, y)
                }
                // 将带有水印的canvas转换为Blob对象
                canvas.toBlob((blob) => {
                    if (blob) {
                        blob.name = file.name
                        resolve(blob);
                    } else {
                        reject(new Error('Failed to create blob from canvas'));
                    }
                }, 'image/png');
            };
            img.src = event.target.result;
        };
        reader.readAsDataURL(file);
    }));
}

/**
 * 写入水印，默认左下角 水印过长，换行 (x,y)=(0,0) 就是左下角的位置
 *  @param {canvas画布对象} ctx
 *  @param {单个水印} watermark
 *  @param {图片的长宽} height
 *  @param {图片的长宽} width
 *  @param {水印字体大小} fontSize
 *  @param {水印位置，默认左下角} x
 *  @param {水印位置，默认左下角} y
 */
function watermarkHandle(ctx, watermark, width, height, fontSize, x, y) {
    //添加水印
    let lineHeight = fontSize + 10
    let line = '';
    const list = [];
    for (let i = 0; i < watermark.length; i++) {
        const testLine = line + watermark[i];
        const metrics = ctx.measureText(testLine);
        const testWidth = metrics.width;
        if (testWidth < width - fontSize && i < watermark.length - 1) {
            line = testLine;
        } else {
            list.push(line)
            line = watermark[i];
        }
    }
    const testLine = line + list[list.length - 1];
    const metrics = ctx.measureText(testLine);
    const testWidth = metrics.width;
    if (testWidth < width - fontSize) {
        list[list.length - 1] = list[list.length - 1] + line
    } else {
        list.push(line)
    }
    for (let i = list.length - 1; i >= 0; i--) {
        ctx.fillText(list[i], x, height - y);
        y += lineHeight;
    }
    //位置
    return y;
}
